<!--
 * @Author: your name
 * @Date: 2020-12-25 15:16:45
 * @LastEditTime: 2020-12-25 17:29:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \basiccss\textcontrol\wenbenstyle.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本样式</title>
    <style>
        /*大小转化*/
        /*小号大写字母*/
        /**/
        span{
            font-variant: small-caps;
        }
        h2{
            /*首字母大写*/
            text-transform: capitalize;
            /**全部大写**/
            text-transform: uppercase;
            /*全部小写*/
            text-transform: lowercase;
        }


        /*---------------文本线条------------------------*/
        /* a{
            text-decoration: none;
        }
        span.underline{
            text-decoration: underline;
        }
        span.through{
            text-decoration: line-through;
        }
        span.overline{
            text-decoration: overline;
        }

        h1{
            text-shadow: #32ff7e 5px 5px 4px;
        }


        p.com{
            font-weight: bold;
            font-size: 2em;
            text-shadow: #4b4b4b 5px 5px 5px;
        } */


        /*
            空白处理
        */
        /*使用white-space控制文本空白显示*/
        /*
            pre 保留文本中的空白以及换行符,类似于使用pre标签
            nowrap 禁止文本换行
            pre-warp 保留空白，保留换行符
            pre-line 空白合并,保留换行符
        */

        /* h2{
            white-space: pre;
            width: 100px;
            border: 1px solid #dddddd;
        } */


        /*
            文本溢出
            下面来学习文本溢出的控制
        */
        /*
            单行文本
            溢出文本容器后换行处理
        */
        /* h2{
            overflow-wrap: break-word;
            width: 100px;
            border: 1px solid #dddddd;
        } */


        divs{
            width: 200px;
            border: 1px solid blueviolet;
            white-space: nowrap;/*禁止文本换行*/
            overflow: hidden;/*超出隐藏*/
            text-overflow: ellipsis;
        }


        /* .div1{
            width: 200px;
            border: 1px solid #ff3838;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
        } */


        table{
            border: 1px solid #cccccc;
            table-layout: fixed;
        }
        table tbody tr td{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }



        
    </style>
</head>
<body>
    <!-- <span>houdunren.com</span>
    <h2>hdcms.com</h2> -->
    
    <!-- <a href="">houdunren.com</a>
    <hr>
    <span class="underline">下划线</span>
    <hr>
    <span class="through">删除线</span>
    <hr>
    <span class="overline">上划线</span>
    <hr>
    <h1>阴影控制</h1>
    <p class="com">houdunren.com</p> -->

    <!-- <h2>hou      dunren    .com</h2> -->

    <!-- <div>
        后盾人自2010年创立至今，免费发布了大量高质量视频教程，视频在优酷、土豆、酷六等视频网站均有收录，很多技术爱好者受益其中。除了免费视频外，后盾人还为大家提供了面授班、远程班、公益公开课、VIP系列课程等众多形式的学习途径。后盾人有一群认真执着的老师，他们一心为同学着想，将真正的知识传授给大家是后盾人永远不变的追求。
    </div> -->


    <!-- <div class="div1">
    后盾人自2010年创立至今，免费发布了大量高质量视频教程，视频在优酷、土豆、酷六等视频网站均有收录，很多技术爱好者受益其中。除了免费视频外，后盾人还为大家提供了面授班、远程班、公益公开课、VIP系列课程等众多形式的学习途径。后盾人有一群认真执着的老师，他们一心为同学着想，将真正的知识传授给大家是后盾人永远不变的追求。
    </div> -->


    <table>
        <tbody>

        <tr>
            <td>1111111111111111111</td>
            <td>1111111111111111111</td>
            <td>1111111111111111111</td>
            <td>1111111111111111111</td>
        </tr>
        <tr>
            <td>1111111111111111111</td>
            <td>1111111111111111111</td>
            <td>1111111111111111111111111</td>
            <td>111111111111111111111</td>
        </tr>
        <tr>
            <td>1111111111111111111</td>
            <td>1111111111111111111</td>
            <td>1111111111111111111</td>
            <td>1111111111111111111</td>
        </tr>
    </tbody>
    </table>



</body>
</html>